<template>
    <div class="login">
        <Top>首页</Top>
        <div class="login-form">
            <span class="photo"></span>
           <cube-form :model="model"  @submit="submitHandler">
                <cube-form-group>
                    <cube-form-item :field="fields[0]"></cube-form-item>
                    <cube-form-item :field="fields[1]"></cube-form-item>
                </cube-form-group>
                <cube-form-group>
                    <cube-button type="submit" class="btn">登录</cube-button>
                    <cube-button type="register" class="btn"  :primary="true" >注册</cube-button>
                </cube-form-group>
            </cube-form>
        </div>
    </div>
   
</template>
<script>
import Top from '@/components/Top.vue'
import {mapActions} from 'vuex'
export default {
    components:{
        Top
    },
  data() {
    return {
      model: {
        username: '',
        password:''
      },
       fields: [
            {
                type: 'input',
                modelKey: 'username',
                label: '用户名',
                props: {
                    placeholder: '请输入用户名'
                },
                rules: {
                    required: true
                }
            },
            {
                type: 'input',
                modelKey: 'password',
                label: '密码',
                props: {
                    placeholder: '请输入密码'
                },
                rules: {
                    required: true
                }
            },
       ]
    }
  },
  methods: {
      ...mapActions(['setLogin']),
    // 登录成功
    submitHandler(e) {
        e.preventDefault();
        this.setLogin(this.model)
        //从哪来回到哪里去
        if(this.$route.query.from){
            this.$router.push(this.$route.query.from) 
        } else{
            this.$router.push('/profile')
        } 
      
    }
  }
}
</script>
<style lang="less">
.login{
    &-form{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top:100px;
        .photo{
            background: url('../../assets/images/photo.png');
            width: 80px;
            height: 80px;
            background-size:cover;//contan
            display: block;
            margin-bottom: 5px;
        } 
        .btn{
            margin-top:5px;
        } 
    }
     
}
</style>